<template>
  <!-- 滑块验证码组件 -->
  <div class="slideBox">
    <h3>拖动下方滑块完成拼图</h3>
    <slide-verify
      ref="block"
      :slider-text="text"
      :accuracy="accuracy"
      @again="onAgain"
      @success="onSuccess"
      @fail="onFail"
      @refresh="onRefresh"
    ></slide-verify>
  </div>
</template>

<script lang='ts'>
import {
  reactive,
  onMounted,
  ref,
  toRefs,
  watch,
  defineComponent,
  defineProps,
} from "vue";
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
import { ElMessage } from "element-plus";
// props值
export default defineComponent({
  components: {
    SlideVerify,
  },
  setup() {
    const msg = ref("");
    const block = ref<SlideVerifyInstance>();
    const onAgain = () => {
      msg.value = "检测到非人为操作的哦！ try again";
      // 刷新
      block.value?.refresh();
      ElMessage.error(msg.value);
    };
    // 成功回调
    const onSuccess = (times: number) => {
      msg.value = `验证成功, 耗时${(times / 1000).toFixed(1)}s`;
      ElMessage.success(msg.value);
    };
    // 失败回调
    const onFail = () => {
      msg.value = "验证不通过";
      ElMessage.error(msg.value);
    };
    // 刷新回调
    const onRefresh = () => {
      msg.value = "点击了刷新小图标";
      ElMessage.success(msg.value);
    };

    const handleClick = () => {
      // 刷新
      block.value?.refresh();
      msg.value = "";
    };
    return {
      block,
      msg,
      text: "向右滑动",
      accuracy: 5,
      onAgain,
      onSuccess,
      onFail,
      onRefresh,
      handleClick,
    };
  },
});
</script>
<style lang="less" scoped>
.slideBox {
  padding: 27px 10px;
  border: 1px solid rgb(175, 172, 172);
  border-radius: 5px;
}
h3 {
  margin-bottom: 15px;
}
</style>